<template>
    <TCollapse title="审核人员选择">
        <el-table :data="copytableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column v-for="item in PersonColumns" :key="item.prop" :label="item.label" show-overflow-tooltip
                :prop="item.prop" align="center">
                <template v-slot="scope">
                    <span v-if="!item.operate">{{ scope.row[item.prop]
                        }}</span>
                    <div v-else style="display: flex;">
                        <span v-if="showOperate" class="operat-content"
                            @click="openCheckPerson(scope.row, item.prop)">{{
                                scope.row[item.prop] }}</span>
                        <span v-if="showOperate" class="operat-btn"
                            @click="deletePersonInfo(scope.row, item.prop)">删除</span>
                        <span v-if="!showOperate" style="margin: auto;">{{ scope.row[item.prop] }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="选择会签人员" :visible.sync="showPerson" class="pms-zr-dialog" width="70%">
            <el-main class="mainDetails">
                <SearchPanel title="人员查询">
                    <div ref="queryFormBox" class="search-flex-box">
                        <MyForm ref="formRef" v-model="queryParams" :form-option="PersonformOption" />
                        <div class="searchBtn">
                            <el-button type="primary" class="pms-button-primary" @click="doSearch">查 询</el-button>
                        </div>
                    </div>
                </SearchPanel>
                <SearchPanel style="margin-top: 20px;" title="查询结果">
                    <el-table :data="PersontableData" style="width: 100%" border ref="singleTable"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" width="50" align="center" />
                        <el-table-column v-for="item in checkPersonColumns" :key="item.prop" :label="item.label"
                            show-overflow-tooltip :prop="item.prop" align="center">
                        </el-table-column>
                    </el-table>
                    <pagination v-if="pageParam.total > 10" :total="pageParam.total" :page.sync="pageParam.pageNum"
                        :limit.sync="pageParam.pageSize" @pagination="doSearch" />
                    <el-row :gutter="10" class="marginBottom14" type="flex" justify="center" style="margin-top: 20px;">
                        <el-col :span="1.5">
                            <el-button class="pms-button-primary" @click="confirmPerson">确 定</el-button>
                            <el-button class="pms-button-primary" @click="showPerson = false">取 消</el-button>
                        </el-col>
                    </el-row>
                </SearchPanel>
            </el-main>
        </el-dialog>
    </TCollapse>
</template>
<script>
import SearchPanel from '@/components/basic/SearchPanel'
import { PersonColumns, PersonformOption, checkPersonColumns } from '../../option'
import MyForm from '@/components/basic/myForm'
import SysConst from '@/common/const'
import { Mixins } from "@/views/speciaCorrection/minix"
import {
    getAuditPersonListApi,
    selectAuditPersonApi,
    saveAuditPersonApi
} from "@/api/speciaCorrection/index"
export default {
    name: "SpecialCheckPerson",
    mixins: [Mixins],
    components: {
        MyForm,
        SearchPanel
    },
    watch: {
        newPrjDetail: {
            handler(val) {
                if (JSON.stringify(val) !== '{}') {
                    this.getPersonInfo()
                }
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            tableData: [
            ],
            copytableData: [],
            PersonColumns,
            showPerson: false,
            queryParams: {},
            PersonformOption,
            checkPersonColumns,
            PersontableData: [],
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            },
            selectedRow: [],
            saveCheckParams: {},//保存打开弹框信息
            isHandlingSelection: false
        }
    },
    computed: {
        showOperate() {
            return this.newWorkDetail?.activityDefID === 'correct_01'
        }
    },
    methods: {
        async getPersonInfo() {
            const params = {
                adjustId: this.newWorkDetail?.bizObject?.bizSeq || this.$route.query.adjustId,
            }
            const { code, data } = await getAuditPersonListApi(params)
            if (+code === 200) {
                this.tableData = data
                this.copytableData = data.filter(item => !['特别修正确认', '特别修正申请'].includes(item.processStepsName))
            }
        },
        handleSelectionChange(selectedRows) {
            if (this.isHandlingSelection) {
                return
            };
            this.isHandlingSelection = true;

            if (selectedRows.length > 1) {
                const lastRow = selectedRows.pop();
                this.$refs.singleTable.clearSelection();
                this.$nextTick(() => {
                    this.$refs.singleTable.toggleRowSelection(lastRow, true);
                    this.selectedRow = lastRow;
                    this.isHandlingSelection = false;
                });
            } else {
                this.selectedRow = selectedRows[0] || {};
                this.isHandlingSelection = false;
            }
        },
        async confirmPerson() {
            const { empId } = this.selectedRow
            const params = {
                fieldName: this.saveCheckParams.fieldName,
                adjustId: this.newWorkDetail?.bizObject?.bizSeq,
                empId
            }
            const { code, message } = await saveAuditPersonApi(params)
            if (+code === 200) {
                this.showPerson = false
                this.$message.success(message)
                this.getPersonInfo()
            }
        },
        // 打开选人弹框
        async openCheckPerson(row, item) {
            this.saveCheckParams = row
            this.showPerson = true;
            const params = {
                pageNum: 1,
                pageSize: 10,
                param: {
                    nodeId: row.nodeId,
                    adjustId: this.newWorkDetail?.bizObject?.bizSeq || this.$route.query.adjustId,
                    roleCode: row.roleCode,
                    empName: "",
                    orgName: ""
                }
            }
            const { code, data } = await selectAuditPersonApi(params)
            if (+code === 200) {
                this.pageParam.total = data.total
                this.PersontableData = data.list
            }
        },
        // 弹框查询人
        async doSearch(item) {
            const params = {
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                param: {
                    nodeId: this.saveCheckParams.nodeId,
                    roleCode: this.saveCheckParams.roleCode,
                    adjustId: this.newWorkDetail?.bizObject?.bizSeq || this.$route.query.adjustId,
                    ...this.queryParams
                }
            }
            const { code, data } = await selectAuditPersonApi(params)
            if (+code === 200) {
                this.PersontableData = data.list
            }
        },
        async deletePersonInfo(row, item) {
            const params = {
                fieldName: row.fieldName,
                adjustId: this.newWorkDetail?.bizObject?.bizSeq,
            }
            this.$confirm('确定删除此记录？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                cancelButtonClass: 'pms-zr-button',
                confirmButtonClass: 'pms-zr-button-primary',
                type: 'warning'
            }).then(async () => {
                const { code, message } = await saveAuditPersonApi(params)
                if (+code === 200) {
                    this.$message.success(message)
                    this.getPersonInfo()
                }
            }).catch(() => {
                console.log("cancel");
            })
        }
    },
    created() {
        if (this.$route.query.type !== 'todo' || this.newWorkDetail?.activityDefID !== 'correct_01') {
            this.PersonColumns = this.PersonColumns.filter(item => item.prop !== "operateName")
        }
    }
}

</script>
<style lang="scss" scoped>
.operat-content {
    cursor: pointer;
    width: 120px;
    text-align: left;
    color: rgb(51, 170, 255)
}

.operat-btn {
    color: red;
    font-size: 12px;
    cursor: pointer;
    margin: auto;
}

.search-flex-box {
    height: auto;

    .searchBtn {
        width: 100px;
        margin-left: auto;
        display: flex;
        margin-top: 4px;
        flex-direction: column;

        .el-button+.el-button {
            margin-left: 0;
            margin-top: 8px;
        }
    }
}

::v-deep .el-table .el-table__header-wrapper .el-checkbox {
    display: none;
}
::v-deep .el-pagination .el-icon-arrow-right {
    rotate: 90deg !important;
}
</style>